<template>
    <div class="main">
        <img class="mainbg" src="@/assets/51miz-E1086866-C19E0D5F.jpg" />
        <div class="head">
            <div class="head-t">{{ date }}</div>
            <div :class="['head-b', indexTab == 1 ? ' head-b-a' : '']" @click="indexTab = 1">指挥体系</div>
            <div :class="['head-b', indexTab == 2 ? ' head-b-a' : '']" @click="indexTab = 2">分析研判</div>
            <div class="head-m" @dblclick="downloadTemplate">沁水县平安县城创建</div>
            <div class="head-b"><a :href="mainData[24] ? mainData[24][0][0] : ''" target="_blank">平安县城</a></div>
            <div class="head-b"><a :href="mainData[24] ? mainData[24][0][1] : ''" target="_blank">平安乡镇</a></div>
            <div class="head-bs">
                <div class="head-bs-i" @click="screenfullChange">
                    <img v-if="!screenfullType" src="@/assets/q1.png" alt="">
                    <img v-else src="@/assets/q2.png" alt="">
                    全屏
                </div>
                <div class="head-bs-i">
                    <img src="@/assets/q3.png" alt="">
                    设置
                    <div class="head-bs-ia">
                        <el-upload action="" accept=".xls,.xlsx" :auto-upload="false" :on-change="onChange" :limit="1">
                            <el-button type="primary">选择文件</el-button>
                        </el-upload>
                    </div>

                </div>
            </div>
        </div>
        <div class="cont">
            <Main1 v-if="indexTab == 2" :infoData="mainData" />
            <Main v-if="indexTab == 1" :infoData="mainData" />
        </div>
    </div>
</template>

<script>
var xlsx = require("xlsx");
import Main from "./indexModal/main.vue";
import Main1 from "./indexModal1/main.vue";
import screenfull from "screenfull";

export default {
    components: { Main, Main1 },
    data() {
        return {
            date: this.$Moment().format('YYYY-MM-DD HH:mm:ss'),
            dateFun: null,
            aerialShwoType: true,
            mainData: [],
            indexTab: 1,
            screenfullType: false,
        }
    },
    created() {
        this.getDate();
    },
    mounted() {
    },
    methods: {
        downloadTemplate() {
            window.location.href = 'http://61.162.225.227:19000/casugn-cloud-docs/data.xlsx'
        },
        screenfullChange() {
            if (screenfull.isEnabled) {
                this.screenfullType = !this.screenfullType
                screenfull.toggle();
            }
        },
        readFile(file) {
            return new Promise((resolve) => {
                const reader = new FileReader()
                reader.readAsBinaryString(file)
                reader.onload = (ev) => {
                    resolve(ev.target.result)
                }
            })
        },
        async onChange(file) {
            const dataBinary = await this.readFile(file.raw)
            const workBook = xlsx.read(dataBinary, {
                type: 'binary',
                cellDates: true
            })
            const data = []
            workBook.SheetNames.map(i => {
                data.push(xlsx.utils.sheet_to_json(workBook.Sheets[i]))
            })
            // localStorage.setItem("INFODATA",JSON.stringify(data))
            console.log(data)
            this.mainData = data
        },
        getDate() {
            const that = this
            that.dateFun = setInterval(() => {
                that.date = that.$Moment().format('YYYY-MM-DD  HH:mm:ss')
            }, 1000)
        }
    },
    beforeDestroy() {
        clearInterval(this.dateFun)
        this.dateFun = null
    }
}
</script>
<style lang="scss" scoped>
.main {
    user-select: none;
    min-width: 1920px;
    min-height: 1080px;
    position: relative;
    height: 100%;
    background-image: url('../assets/mainbfg.png');
    background-size: 100% 100%;
    background-color: #04102ccc;

    .mainbg {
        width: 1920px;
        height: 1080px;
        opacity: .3;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .head {
        padding-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        .head-t {
            color: #fff;
            font-family: 'YSBTH';
            font-size: 16px;
            width: 210px;
        }

        .head-b {
            cursor: pointer;
            background-image: url('../assets/bt33.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            color: #ccc;
            width: 100px;
            height: 40px;
            font-family: 'SJYHJT';
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            text-shadow: 0 0 8px #000;
            border-radius: 12px;
            transition: all .4s;
            margin: 0 10px;

            &:hover {
                text-shadow: 0 0 8px #888;
                background-image: url('../assets/bt55.png');
            }

            a {
                color: #ccc;
                text-decoration: none;
            }
        }

        .head-b-a {
            color: #fff;
            background-image: url('../assets/bt33a.png');
        }

        .head-m {
            font-family: 'YSBTH';
            font-size: 40px;
            letter-spacing: 10px;
            color: #fff;
            margin: 0 230px;

        }

        .head-bs {
            width: 210px;
            display: flex;
            align-items: center;
            justify-content: center;

            .head-bs-i {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                background-image: url('../assets/anniu1.png');
                width: 80px;
                color: #fff;
                height: 30px;
                font-size: 12px;
                background-repeat: no-repeat;
                text-shadow: 0 0 8px #000;
                box-shadow: 0 0 8px #00000066;
                background-size: 100% 100%;
                transition: all .6s;
                margin: 0 10px;
                cursor: pointer;

                &:hover {
                    box-shadow: 0 0 8px #cccccc66;
                    text-shadow: 0 0 8px #888;
                }

                img {
                    width: 15px;
                    margin-right: 5px;
                }
            }

            .head-bs-ia {
                position: absolute;
                opacity: 0;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
    }

    .cont {
        margin: 20px 60px 0;
    }
}
</style>